<template>
  <!-- 首页入口 -->
  <div class="home-entry">
    <div class="container">
      <!-- 左侧分类 -->
      <HomeCategory />
      <!-- 轮播图 -->
      <HomeBanner />
    </div>
    <!-- <xtcSkeleton width="200px" height="200px" bg="red" animated /> -->
  </div>
  <!-- 新鲜好物 -->
  <!-- <HomePanel title="新鲜好物" sub-title="新鲜出炉 品质靠谱">
    <template #right>
      <XtxMore path="/test" />
    </template>
    //面板内容
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
  </HomePanel> -->
  <HomeNew />
  <!-- 人气推荐 -->
  <HomeHot />


  <!--
     //使用transition组件
  <button @click="show = true">显示|创建</button>
  <button @click="show = false">隐藏|移除</button>
  <Transition>
    //这里可以是v-show="show" 也可以是v-if="show"
    <div
      v-show="show"
      style="width: 100px; height: 100px; background: red"
    ></div>
  </Transition>
  <Transition name="h">
    <div v-show="show" style="background: red"></div> </Transition
  >
  -->

  <!-- 热门品牌 -->
  <HomeBrand/>
  <!-- 商品区域 -->
  <HomeProduct />
  <!-- 最新专题 -->
  <HomeSpecial />
</template>

<script>
import { ref } from "vue";
import HomeCategory from "./components/home-category";
// import xtcSkeleton from '@/components/library/xtx-skeleton.vue'
import HomeBanner from "./components/home-banner.vue";
// import HomePanel from "./components/home-panel.vue";
import HomeNew from "./components/home-new.vue";
import HomeHot from "./components/home-hot.vue";
import HomeBrand from "./components/home-brand.vue";
import HomeProduct from "./components/home-product.vue";
import HomeSpecial from "./components/home-special.vue";

// vue插件的形式注册组件，方法等等
export default {
  name: "HomePage",
  components: {
    HomeCategory,
    // xtcSkeleton,
    HomeBanner,
    // HomePanel,
    HomeNew,
    HomeHot,
    HomeBrand,
    HomeProduct,
    HomeSpecial
  },
  // setup() {
  //   const show = ref(true);
  //   return { show };
  // },
};
</script>

<style scoped lang="less">
// 因为引入了vue.config.js的新代码，就算没有也可以
// @import '../../assets/styles/mixins.less';
// .container {
//   .hoverShadow();
//   color: @xtxColor;
// }

// // 进入（显示，创建）
// // 1.vue2.0
// // v-enter 进入前 （vue3.0 v-enter-from）
// // v-enter-active 进入中
// // v-enter-to 进入后
// .v-enter-from {
//     opacity: 0;
// }
// .v-enter-active {
//     transition: all 2s;
// }
// .v-enter-to {
//     opcaity: 1;
// }

// // 离开（隐藏，移除）
// // 1.vue2.0
// // v-leave 进入前 （vue3.0 v-leave-from）
// // v-leave-active 进入中
// // v-leave-to 进入后
// .v-leave-from {
//     opacity: 0;
// }
// .v-leave-active {
//     transition: all 2s;
// }
// .v-leave-to {
//     opcaity: 1;
// }

// // 如果需要写入多个组动画，多个transition使用不同动画，
// // 可以添加nam属性（name="xxx"），name属性的值替换v即可。
// // h的动画
// .h-enter-from {
//     height: 0px;
// }
// .h-enter-active {
//     transition: all 2s;
// }
// .h-enter-to {
//     height: 100px;
// }
// .h-leave-from {
//     height: 100px;
// }
// .h-leave-active {
//     transition: all 2s;
// }
// .h-leave-to {
//     height: 0px;
// }
</style>